<template>
  <div class="dashboard-editor-container enterprise-container">
    <!-- 标准版，供应商版页面 -->
    <h2 class="font-24 title-bar">数据概况</h2>
    <el-row :gutter="20">
      <el-col :span="8">
        <div class="chart-style border-radius-5 height-316 pad-r-20">
          <h3 class="font-24 short-title flex v-align-c"><svg-icon class="icon-layer mar-r-20" icon-class="taskFile"/>任务统计</h3>
          <p class="align-c font-w mar-15 total-font pad-b-10 green">{{taskStat.totalTaskNum}}</p>
          <p class="align-c font-18 mar-15 pad-b-20">已发布任务总数</p>
          <el-row>
            <el-col :span="8">
              <p class="align-c font-24 font-w mar-15">{{taskStat.unAcceptTaskNum}}</p>
              <p class="align-c font-16">待验收任务数</p>
            </el-col>
            <el-col :span="8">
              <p class="align-c font-24 font-w mar-15">{{taskStat.enrolmentTaskNum}}</p>
              <p class="align-c font-16">报名中任务数</p>
            </el-col>
            <el-col :span="8">
              <p class="align-c font-24 font-w mar-15">{{taskStat.finishTaskNum}}</p>
              <p class="align-c font-16">已完成任务数</p>
            </el-col>
          </el-row>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="chart-style border-radius-5 height-316 pad-r-20">
          <h3 class="font-24 short-title flex v-align-c"><svg-icon class="icon-layer mar-r-20" icon-class="users"/>微客统计</h3>
          <el-row class="pad-t-30">
            <el-col :span="12">
              <p class="align-c font-w mar-15 total-font pad-b-10 blue">{{memberStat.in}}</p>
              <p class="align-c font-16">内部微客数(人)</p>
            </el-col>
            <el-col :span="12">
              <p class="align-c font-w mar-15 total-font pad-b-10 blue">{{memberStat.out}}</p>
              <p class="align-c font-16">外部微客数(人)</p>
            </el-col>
          </el-row>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="chart-style border-radius-5 height-316 pad-r-20">
          <h3 class="font-24 short-title flex v-align-c"><svg-icon class="icon-layer mar-r-20" icon-class="wallet"/>酬金统计</h3>
          <p class="align-c font-w mar-15 total-font pad-b-10 red">{{commissionStat.totalAmount}}</p>
          <p class="align-c font-18 mar-15 pad-b-20">酬金总数(元)</p>
          <el-row>
            <el-col :span="12">
              <p class="align-c font-24 font-w mar-15">{{commissionStat.taskAmount}}</p>
              <p class="align-c font-16">众包酬金数(元)</p>
            </el-col>
            <el-col :span="12">
              <p class="align-c font-24 font-w mar-15">{{commissionStat.shareAmount}}</p>
              <p class="align-c font-16">分发酬金数(元)</p>
            </el-col>
          </el-row>
        </div>
      </el-col>
    </el-row>
    <h2 class="font-24 title-bar">项目数据</h2>
    <el-row :gutter="20">
      <el-col :span="12">
        <div class="chart-style border-radius-5">
          <div class="align-r pad-r-30 pad-b-20 mar-r-10">
            <el-date-picker
              v-model="taskDateArray"
              type="daterange"
              size="small"
              range-separator="至"
              value-format="yyyy-MM-dd HH:mm:ss"
              :default-time="['00:00:00', '23:59:59']"
              start-placeholder="开始日期"
              end-placeholder="结束日期">
            </el-date-picker>
            <el-button type="primary" class="mar-l-10" size="mini" @click="statTaskByDay">筛选</el-button>
          </div>
          <line-chart :chart-data="taskDayStat.data" :chart-type="taskDayStat.taskStatusList" :chart-x="taskDayStat.dayList"></line-chart>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="chart-style border-radius-5">
          <div class="align-r pad-r-30 pad-b-20 mar-r-10">
            <el-date-picker
              v-model="memberDateArray"
              type="daterange"
              size="small"
              range-separator="至"
              value-format="yyyy-MM-dd HH:mm:ss"
              :default-time="['00:00:00', '23:59:59']"
              start-placeholder="开始日期"
              end-placeholder="结束日期">
            </el-date-picker>
            <el-button type="primary" class="mar-l-10" size="mini" @click="statMemberByDay">筛选</el-button>
          </div>
          <line-chart :chart-data="memberDayStat.data" :chart-type="memberDayStat.memberNatureList" :chart-x="memberDayStat.dayList"></line-chart>
        </div>
      </el-col>
    </el-row>
    <h2 class="font-24 title-bar">平台指标</h2>
    <el-row>
      <div class="chart-style border-radius-5">
        <div class="chart-num-box">
          <div class="text-align-c pad-b-30 timer-box">
            <span class="timer-bar">{{nowTime}}</span>
            累计公共微客人数
          </div>
          <div class="text-align-c total-num-chart font-w">{{memberAreaStat.total}}</div>
        </div>
        <china-map :areaData="memberAreaStat.areaData"></china-map>
      </div>
    </el-row>
  </div>
</template>

<script>
  import LineChart from '@/components/Charts/LineChart'
  import PieChart from '@/components/Charts/PieChart'
  import ChinaMap from '@/components/Charts/ChinaMap'
  import BarChart from '@/components/Charts/BarChart'
  import { statTask, statTaskByDay, statMember, statMemberByDay, statCommissionAmount, statMemberByArea, pageTips } from '@/api/common/dashboard'
  import { listLastPaidOrder } from '@/api/goods/order'
  import store from '@/store'

  export default {
    name: 'dashboard-index',
    components: {
      LineChart,
      PieChart,
      ChinaMap,
      BarChart
    },
    data() {
      return {
        versionType: '',
        taskStat: {},
        taskDayStat: {},
        memberStat: {},
        memberDayStat: {},
        commissionStat: {},
        memberAreaStat: {
          total: 0,
          areaData: []
        },
        taskDateArray: [],
        taskStartDate: '',
        taskEndDate: '',
        memberDateArray: [],
        nowTime: '',
        notifyIndex: 0,
        updateAreaDataTimeoutId: ''
      }
    },
    // 初始化页面
    created() {
      this.versionType = this.getVersionType()
      this.init()
    },
    destroyed() {
      clearTimeout(this.updateAreaDataTimeoutId)
    },
    methods: {
      init() {
        this.statTask()
        this.statTaskByDay()
        this.statMember()
        this.statMemberByDay()
        statCommissionAmount(this.getEnterpriseId()).then(response => {
          if (response.isError) {
            return
          }
          this.commissionStat = response.data
        })
        this.$notify.closeAll()
        if (this.hasPermission(store.getters.permission_routers, 'goods-order-detail-index')) {
          listLastPaidOrder({
            'enterpriseId': this.getEnterpriseId(),
            'nums': 5
          }).then(response => {
            if (response.isError) {
              return
            }
            this.notifyPaidOrder(response.data.records)
          })
        }
        this.updateNowTime()
        this.updateAreaData()
        if (this.hasPermission(store.getters.permission_routers, 'goods-setting-index')) {
          this.pageTips()
        }
      },
      // 判断是否有权限
      hasPermission(permissions, name) {
        for (const item of permissions) {
          if (item.name === name) {
            return true
          }
          if (item.children && item.children.length > 0) {
            const contains = this.hasPermission(item.children, name)
            if (contains) return true
          }
        }
        return false
      },
      statTask() {
        statTask({
          enterpriseId: this.getEnterpriseId()
        }).then(response => {
          if (response.isError) {
            return
          }
          this.taskStat = response.data
        })
      },
      statTaskByDay() {
        statTaskByDay({
          enterpriseId: this.getEnterpriseId(),
          startDate: this.taskDateArray && this.taskDateArray.length > 0 ? this.taskDateArray[0] : '',
          endDate: this.taskDateArray && this.taskDateArray.length > 1 ? this.taskDateArray[1] : ''
        }).then(response => {
          if (response.isError) {
            return
          }
          this.taskDayStat = response.data
          this.taskDayStat.data = {
            oneData: this.taskDayStat.taskStatusDataMap.enrolmentData,
            twoData: this.taskDayStat.taskStatusDataMap.unAcceptData,
            threeData: this.taskDayStat.taskStatusDataMap.finishData
          }
        })
      },
      statMember() {
        statMember({
          enterpriseId: this.getEnterpriseId()
        }).then(response => {
          if (response.isError) {
            return
          }
          this.memberStat = response.data
        })
      },
      statMemberByDay() {
        statMemberByDay({
          enterpriseId: this.getEnterpriseId(),
          startDate: this.memberDateArray && this.memberDateArray.length > 0 ? this.memberDateArray[0] : '',
          endDate: this.memberDateArray && this.memberDateArray.length > 1 ? this.memberDateArray[1] : ''
        }).then(response => {
          if (response.isError) {
            return
          }
          this.memberDayStat = response.data
          this.memberDayStat.data = {
            oneData: this.memberDayStat.memberNatureDataMap.in,
            twoData: this.memberDayStat.memberNatureDataMap.out
          }
        })
      },
      pageTips() {
        pageTips(this.getEnterpriseId()).then(response => {
          if (response.isError) {
            return
          }
          if (response.data.ret === 1) {
            this.$confirm('您未设置分销店铺信息, 【分销库】无法正常显示,请立即前往设置', '提示', {
              confirmButtonText: '前往设置',
              cancelButtonText: '取消',
              title: '温馨提示',
              type: 'warning'
            }).then(() => {
              this.$router.push({ path: '/card/setting/index', query: {}})
            }).catch(() => {
            })
          }
        })
      },
      updateNowTime() {
        const timeoutId = setTimeout(() => {
          const date = new Date()
          const hours = date.getHours() < 10 ? '0' + date.getHours() : date.getHours()
          const minutes = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()
          const seconds = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds()
          this.nowTime = hours + ' : ' + minutes + ' : ' + seconds
          clearTimeout(timeoutId)
          this.updateNowTime()
        }, 1000)
      },
      updateAreaData() {
        statMemberByArea(this.getEnterpriseId()).then(response => {
          if (response.isError) {
            return
          }
          this.memberAreaStat.total = response.data.total
          this.memberAreaStat.areaData = response.data.areaData
        })
        this.updateAreaDataTimeoutId = setTimeout(() => {
          clearTimeout(this.updateAreaDataTimeoutId)
          this.updateAreaData()
        }, 60 * 1000)
      },
      // 未发货订单系统
      notifyPaidOrder(orders) {
        const that = this
        setTimeout(() => {
          const order = orders[this.notifyIndex]
          if (order) {
            this.$notify({
              title: '新订单通知',
              message: order.payTime + '   ' + order.goodsTitle,
              position: 'bottom-right',
              offset: 100,
              duration: 10 * 1000,
              onClick: function() {
                this.$notify.closeAll()
                that.$router.push({ path: '/order/order/detail/index', query: { orderId: order.orderId }})
              }
            })
            this.notifyIndex++
            this.notifyPaidOrder(orders)
          }
        }, 200)
      }
    }
  }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .chart-num-box{
    text-align: center;
    padding-top: 20px;
    color: #333333;
  }
  .total-num-chart{
    font-size: 50px;
    letter-spacing: 18px;
    padding-top: 35px;
  }
  .timer-box{
    font-size: 36px;
    display: inline-block;
    border-bottom: #cccccc 1px solid;
    padding-bottom: 22px;
  }
  .timer-bar{
    padding-right: 230px;
  }
  .box-shadow{
    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.349019607843137);
    background-color: rgba(255, 255, 255, 1);
  }
  .fiscal-container{
    padding: 32px;
    background-color: rgba(255, 255, 255, 1);
  }
  .enterprise-container{
    padding: 32px;
    background-color: rgb(240, 242, 245);
  }
  .dashboard-editor-container {
    .total-font{
      font-size: 40px;
    }
    .title-bar{
      color: #668bbc;
      font-weight: normal;
    }
    .short-title{
      font-weight: normal;
      margin: 0 0 30px 0;
      padding: 0;
      color: #668bbc;
    }
    .chart-wrapper {
      background: #fff;
      padding: 16px 16px 0;
      margin-bottom: 32px;
    }
    .chart-style{
      background:#fff;
      padding:16px 0px 0 20px;
      margin-bottom:32px;
      &.pad-r-20{
        padding:16px 20px 0 20px;
      }
    }
    .chart-box{
      height: 397px;
    }
    .check-detail{
      position: absolute;
      right: 20px;
      top: 15px;
      color: #9a9a9a;
      cursor: pointer;
    }
    .icon-layer{
      font-size: 34px;
    }

    .green {
      color: #43CAC8;
    }
    .blue {
      color: #36A3F7;
    }
    .red {
      color: #F5506C;
    }
  }
  .ring-progress{
    .ring-box{
      position: relative;
      margin-top: 100px;
      .success-box{
        top: 0;
        left: 0;
        position: absolute;
        width: 100%;
        height: 100%;
        text-align: center;
        line-height: 300px;
        font-size: 36px;
        color: #67C23A;
      }
    }
    .loading-info{
      display: flex;
      justify-content: center;
      align-items: center;
      margin-top: 20px;
    }
    .tips{
      margin: 40px auto 0;
      width: 560px;
      height: 46px;
      line-height: 46px;
      text-align: center;
      border: 1px solid rgb(166, 169, 173);
      border-radius: 5px;
      background: rgb(244, 244, 244);
      color: rgb(144, 147, 153);
    }
    .green{
      color: #67C23A !important;
    }
  }

</style>
